<!-- 信息授权 -->
<template>
	<view>
		<view class="info-confirm" v-if="visible">
			<view class="info-confirmbox">
				<button class="closeLogin" @click="closeMoadl">X</button>
				<view class="loginHeader">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class="loginName">
					<open-data type="userNickName"></open-data>
				</view>
				<view class="loginTip">
					<view class="loginTitle">申请获取以下微信信息</view>
					<view class="loginDesc" v-if="!hasUserInfo">昵称、头像以及标识等111</view>
					<view class="loginDesc" v-if="hasUserInfo">用户手机号</view>
				</view>

				<view class="loginBtn" v-if="!hasUserInfo">
					<button class="weui-btn" type="primary" @click="bindGetUserInfo">立即登录</button>
					<!-- <button class="weui-btn" type="primary" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">立即登录</button> -->
				</view>
				<view class="loginBtn" v-if="hasUserInfo">
					<button class="weui-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="bindGetphonenumber">微信手机号快捷登录</button>
				</view>
			</view>
			<view class="login-mask"></view>
		</view>
	</view>
</template>

<script>
	import http from '../common/http.js'
	export default {
		data() {
			return {
				hasUserInfo: false,
				userInfo: {},
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			param: {
				type: Object
			}
		},
		created() {
			let that = this;
			let wxUser = uni.getStorageSync('wxUser')
			if (wxUser) {
				that.hasUserInfo = true
			} else {
				that.hasUserInfo = false
			}
			// uni.getUserInfo({
			// 	success: res => {
			// 		this.setUserInfo(res);
			// 	},
			// 	fail: res => {
			// 		//未授权，不能使用
			// 	}
			// })
		},

		methods: {
			bindGetUserInfo: function(e) {
				wx.getUserProfile({
					desc: '用于完善用户资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.setUserInfo(res);
						this.userInfo = res.userInfo;
					}
				})
				
				// if (e.detail.errMsg == "getUserInfo:ok") {
				// 	//说明用户点击了确定授权
				// 	this.setUserInfo(e.detail);
				// 	console.log(e.detail)
				// } else {}
			},

			// 授权成功后将用户信息存到全局和缓存中
			setUserInfo: function(detail) {
				uni.showLoading({
					title: "信息授权中..",
					mask:true
				});
				//为了保证后台解析得到用户信息是正确的，获取用户信息的流程应为
				//，wx.login拿到code ==> wx.getUserInfo拿到iv和encryptedData ==> 发送给服务器解密
				wx.login({
					success: res => {
						if (res.errMsg == "login:ok") {
							// wx.getUserInfo({
							// 	success: detail => {
									uni.hideLoading();
									getApp().globalData.userInfo = detail.userInfo; // 储存用户信息到全局
									wx.setStorageSync(" wxUser", detail.userInfo); // 储存用户信息到缓存中
									let data = {        
										"wxApp": "mall", //商城小程序标识
										wxLogin: 'true', //使用微信登录标志，不需要再输入用户名密码，直接可通过微信登录
										// iv: detail.iv, //公钥
										// encryptedData: detail.encryptedData, //加密的信息
										jsCode: res.code //通过wx.login获取的jsCode
									};
								console.lo(data)
									// this.doLogin(data);
							// 	}
							// });
						}
					}
				});
			},

			doLogin: function(data) {
				//用openId去做后台登录操作
				let that = this;
				wx.request({
					url: http.apiUrl + "/login", //自己的后台登录方法（即cortroller层的登录方法地址）
					method: 'POST',
					data: data,
					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
					},
					success: function(res) {
						//设置cookies信息，
						wx.setStorageSync("sessionid", res.header["Set-Cookie"].split(";")[0]);
						// 去后台请求用户信息

						http.request({
							url: http.apiUrl + "/auth/findUserInfo",
							method: 'get',
							data: '',
							context: '',
							callback: resp => {
								let wxUser = {}
								Object.assign(wxUser,that.userInfo,resp);
								getApp().globalData.userInfo = wxUser; // 储存用户信息到全局
								wx.setStorageSync("wxUser", wxUser); // 储存用户信息到缓存中
								that.hasUserInfo = true;
								if (resp&&resp.tel && resp.tel !== '') {
									that.callBackFunc();
									that.closeMoadl();
								}
							}
						})
					},
					fail: function() {
						wx.hideLoading()
					}
				});
			},
			// 获取用户授权拿到手机号
			bindGetphonenumber: function(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					//说明用户点击了确定授权
					this.setPhoneNumber(e.detail);
					console.log(e)
				} else {

				}
			},

			// 用wx.login获取相关参数去后台做登录
			setPhoneNumber: function(detail) {
				uni.showLoading({
					title: '正在获取中..'
				})
				wx.login({
					success: res => {
						if (res.errMsg == "login:ok") {
							let data = {
								"wxApp": "mall", //商城小程序标识
								wxLogin: 'true', //使用微信登录标志，不需要再输入用户名密码，直接可通过微信登录
								iv: detail.iv, //公钥
								encryptedData: detail.encryptedData, //加密的信息
								jsCode: res.code //通过wx.login获取的jsCode
							};
							this.doGetPhoneNumber(data);
						}
					}
				});
			},

			// 通过后台去请求手机号码
			doGetPhoneNumber: function(data) {
				let that = this;
				let wxUser = wx.getStorageSync('wxUser');
				http.request({
					url: http.apiUrl + "/common/bindWxTel",
					method: 'POST',
					data: data,
					context: '',
					callback: res => {
						uni.hideLoading();
						wxUser.tel = res;
						wx.setStorageSync("wxUser", wxUser); // 储存用户信息到缓存中
						that.closeMoadl();
						that.callBackFunc();
					}
				})

				// http.request( 'POST', data)
				// 	.then(function(res) {
				// 		wxUser.tel = res;
				// 		wx.setStorageSync("wxUser", wxUser); // 储存用户信息到缓存中
				// 		that.closeMoadl()
				// 	})
				// 	.catch(function(res) {
				// 	});
			},
			closeMoadl: function() {
				this.$emit('closeMoadl')
			},
			callBackFunc: function() {
				this.$emit('callBackFunc', this.$props.param)
			}
		}
	}
</script>

<style lang="less">
	.info-confirm {
		.info-confirmbox {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			background: #F9F9F9;
			padding-top: 50rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			padding-bottom: 50px;
		}

		.closeLogin {
			position: absolute;
			right: 10px;
			top: 10px;
			background: none;
			border: 0;

			&::after {
				border: 0;
				border-radius: 0;
			}
		}

		.login-mask {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.loginHeader {
			margin-top: 40px;
			margin-bottom: 20rpx;
			width: 60px;
			height: 60px;
			border-radius: 100%;
			overflow: hidden;
		}

		.loginName {
			text-align: center;
			color: #999999;
			font-size: 12px;
			margin-bottom: 20px;
		}

		.loginTip {
			margin-bottom: 60px;
			padding: 0 20px;
		}

		.loginTitle {
			margin-bottom: 5px;
			font-weight: 400;
			font-size: 18px;
		}

		.loginDesc {
			font-size: 14px;
			color: #999;
			text-align: center;
		}

		.loginBtn {
			width: 86%;
			margin: 0 auto;

			.weui-btn {
				border-radius: 30px;
				font-size: 18x;
			}

		}
	}
</style>
